<template>
  <div class="login-content">
      <div  class="form-container">
        <h1>XXXX 系统</h1>
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol" class="form-content">
          <a-form-item label="用户名" v-bind="validateInfos.username">
            <a-input v-model:value="modelRef.username"
              @blur="validate('username', { trigger: 'blur' }).catch(() => {})" />
          </a-form-item>
          <a-form-item label="密码" v-bind="validateInfos.password">
            <a-input v-model:value="modelRef.password" 
              type="password" autocomplete="off"
              @blur="validate('password', { trigger: 'blur' }).catch(() => {})"/>
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 18, offset: 4 }">
            <a-button type="primary" @click.prevent="onSubmit">Create</a-button>
            <a-row type="flex" justify="space-between">
              <a-col :span="4">点我注册</a-col>
              <a-col :span="4" style="text-align:right;">忘记密码</a-col>
            </a-row>
          </a-form-item>
        </a-form>
      </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { useForm } from '@ant-design-vue/use';
import { login, info }  from '../api/user'
import { notification } from 'ant-design-vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { GolbalStateDataProps } from '@/store';

export default defineComponent({
  setup() {
    const store = useStore<GolbalStateDataProps>()
    const router = useRouter()

    const modelRef = reactive({
      username: '',
      password: '',
    });
    const { validate, validateInfos } = useForm(
      modelRef,
      reactive({
        username: [
          {
            required: true,
            message: '请输入用户名',
          },
          {
            type: 'email',
            message: '用户名为邮箱格式',
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
          },
          {
            min: 6,
            max: 32,
            message: '密码在 6 - 32 位之间',
            trigger: 'blur',
          },
        ],
      }),
    );
    const onSubmit = () => {
      validate()
        .then(async res => {
          try {
            const loginResponse = await login(res.username, res.password)
            const loginResponseData = loginResponse.data
            // 登录成功
            store.dispatch('setAuthorizationData', loginResponseData.Data)
            const loginNotificationKey = 'login-notification'
            notification.open({
              message: '登录成功',
              description: '即将跳转...',
              duration: 0,
              type: "info",
              key: loginNotificationKey,
            });
            const getInfoResponse = await info()
            const getInfoResponseData = getInfoResponse.data
            store.dispatch('setLoginUserInfo', getInfoResponseData.Data)
            // 跳转页面
            const loginRedirectionRoute = store.state.loginRedirectionRoute
            if (loginRedirectionRoute === undefined || loginRedirectionRoute.name === undefined) {
              router.push({ name: 'Home' })
            } else {
              router.push(loginRedirectionRoute)
            }
            // 关闭通知
            notification.close(loginNotificationKey)
          } catch (e) {
            console.log('login error', e)
          }
        })
        .catch(err => {
          console.log('validate error', err);
        });
    };
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      validateInfos,
      validate,
      modelRef,
      onSubmit,
    };
  },
})
</script>

<style lang="less" scoped>
.login-content {
  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
  height: 100vh;
  display: flex;
  align-items: center; /*定义body的元素垂直居中*/
  justify-content: center; /*定义body的里的元素水平居中*/
  flex-direction: column;
  .form-content {
    width: 480px;
  }
  .form-container {
    background: rgba(255, 255, 255, 0.1);
  }
  h1 {
    color: #fff;
    text-align: center;
    margin-top: 16px;
  }
}
</style>